<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>学生管理系统数据</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <script src="/layui/layui.js"></script>


</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button title="批量删除" class="layui-btn layui-btn-danger delAll_btn" lay-event="studNo"><i class="layui-icon"></i>批量删除
    </button>
    <button title="添加" class="layui-btn" id="add"><i class="layui-icon"></i>添加</button>
  </div>
  <form class="layui-form" action="" style="margin-top: 10px">
    <div class="layui-inline">
      <label class="layui-form-label">学号</label>
      <div class="layui-input-inline">
        <input type="text" id="studNo" name="studno" placeholder="请输入学号"
               autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">学院</label>
      <div class="layui-input-inline">
        <select name="school" id="school">
          <option value="">请选择学院</option>
          <option value="动物科技学院">动物科技学院</option>
          <option value="植物保护学院">植物保护学院</option>
          <option value="信息工程学院">信息工程学院</option>
          <option value="生命科学学院">生命科学学院</option>
          <option value="经济管理学院">经济管理学院</option>
          <option value="农学院">农学院</option>
          <option value="信息工程学院">园艺学院</option>
          <option value="林学院">林学院</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <div class="layui-input-inline">
        <button class="layui-btn" id="searchBtn" lay-submit
                lay-filter="formDemo" data-type="reload" style="margin-left: 15px">
          <i class="layui-icon layui-icon-search"></i> 查询
        </button>
        <button type="reset" id="restBtn" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>

<script type="text/html" id="barDemo">
  <!-- 删除一栏，编辑和删除 -->
  <button title="编辑" class="layui-btn layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>
  </button>
  <button title="删除" class="layui-btn-danger layui-btn layui-btn-xs" lay-event="del"><i
          class="layui-icon">&#xe640;</i></button>
</script>


<script th:inline="none">
  layui.use('table', function () {
    var table = layui.table;
    table.render({
      elem: '#test'
      , url: '/queryStudent'
      , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        , layEvent: 'LAYTABLE_TIPS'
        , icon: 'layui-icon-tips'
      }]
      , method: 'post' //传输格式
      , page :{
        layout:['count','prev','page','next','skip']
      }
      , id : 'studNo'
      , where: {
        studNo: '',
        school: ''
      }
      , limits: [10, 15, 20, 30]
      , limit: 10
      , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      , cols: [[
        {type: 'checkbox'}
        , {field: 'studNo', title: '学号', sort: true, align: 'center'}
        , {field: 'studName', title: '名字', align: 'center'}
        , {field: 'sex', title: '性别', sort: true, align: 'center'}
        , {field: 'nation', title: '民族', align: 'center'}
        , {field: 'political', title: '面貌', align: 'center'}
        , {field: 'birthday', title: '生日', align: 'center'}
        , {field: 'school', title: '学院', align: 'center'}
        , {field: 'major', title: '专业', align: 'center'}
        , {field: 'entranceTime', title: '入学日期', align: 'center'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
        , {
          field: 'level', title: '操作', align: 'center',
          toolbar: '#barDemo' //添加头导航栏
        }
      ]],
      page: true
    });



    //点击查询按钮，重载表格
    $('#searchBtn').on('click', function() {
      var studNo = $('#studNo').val();
      var school = $('#school').val();
      console.log(studNo)
      console.log(school)
      table.reload('studNo', {
        url: '/queryStudentBy',
        page: {
          curr:1
        },
        toolbar: '#toolbarDemo',
        where: {
          studNo : studNo,
          school : school
        },
        done: function(){
          $('#restBtn').on('click', function() {
            window.location.href="index.html";
          });
        }
      })
    });



    //点击添加按钮弹窗
    $("#add").click(function () {
      layui.use('layer', function () {
        layer.open({
          title: '添加学生信息',
          type: 2,
          content: 'toAdd',
          area: ['800px', '500px'],
          maxmin: true
        })
      })
    })

    //批量删除按钮
    $(".delAll_btn").click(function () {
      var checkStatus = table.checkStatus('studNo'),
              data = checkStatus.data,
              studNo = "";
      console.log('这是'+data)
      if (data.length > 0) {
        for (var i in data) {
          studNo += data[i].studNo + ",";
        }
        console.log(studNo);
        layer.confirm('确定删除选中的用户？', {icon: 3, title: '提示信息'}, function (index) {
          $.ajax({
            type: 'delete',
            url: '/deleteAllStu',
            async: true,
            datatype: "json",
            data: {
              ids: studNo,
            },
            success: function (data) {
              layer.alert('删除成功', {icon: 6, title: '提示', time: 1500})
              setTimeout(function () {
                window.parent.location.reload();
                // window.location.href="index.html";
              }, 1500);
            },
            error: function () {
              layer.alert('请求失败，系统错误', {icon: 7, title: '提示', time: 1000})
            }
          })

        })
      } else {
        layer.msg("请选择需要删除的用户");
      }
    });


    //判断修改和删除操作
    table.on('tool(test)', function (obj) {
      //获取行的值
      var data = obj.data;
      if (obj.event === 'del') {
        layer.confirm("确定删除该信息吗？", function (index) {
          var studNo = data.studNo;
          $.ajax({
            type: 'delete',
            url: '/deleteStudent',
            async: true,
            datatype: "json",
            data: {
              studNo: studNo,
            },
            success: function (data) {
              layer.alert('删除成功', {icon: 6, title: '提示', time: 1500})
              setTimeout(function () {
                window.parent.location.reload();
                // window.location.href="index.html";
              }, 1500);
            },
            error: function () {
              layer.alert('请求失败，系统错误', {icon: 7, title: '提示', time: 1000})
            }
          })
        })
      } else if (obj.event === 'edit') {
        json = JSON.stringify(data);
        layui.use('layer', function () {
          layer.open({
            title: '修改信息',
            type: 2,
            content: 'toEdit',
            area: ['800px', '500px'],
            maxmin: true
          })
        })
      }
    })
  });
</script>

</body>
</html>
